<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.2.js"></script>
<style>
	#list{
		width:100%;
		height:100%;
	}
	#listcontent{
		width:800px;
		margin:0px auto;
	}
	#page{
		width:800px;
		margin:0px auto;
		margin-top:20px;
		text-align: center;
	}
	.go{
		width:50px;
	}
	#top{
		margin-bottom: 10px;
	}
	#bu{
		float: right;
		margin-bottom: 10px;
	}
	/* table{
		margin:0px auto;
	} */
</style>
</head>
<body>
	<div id="list">
		<div id="listcontent">
			<h2>音乐大全</h2>
			<span>管理员:${userinfo.uname}</span><br><br>
			
			 <form action="${pageContext.request.contextPath}/music/music_list" name="frm" method="post">
				<div id="top">
					
					演唱者:<input type="text" name="query.singer" value="${query.singer}"/>
					音乐类别:<select name="query.tid" id="tid">
								<option value="0">==请选择==</option>
							</select>
							<input type="hidden" id="now" name="query.pageNow" value="${pb.pageNow}"/>					
					<button type="button" onclick="sreach()">搜索</button>
				</div>
			</form>
			<div id="bu">
			<button onclick="myCollect()">我的收藏</button><br>
			</div>
			<table width="800px" border="1px" cellspacing="0px">
				<tr>
					<th><button onclick="qx()">全选</button>/<button onclick="fx()">反选</button></th>
					<th>编号</th>
					<th>名称</th>
					<th>演唱者</th>
					<th>时长</th>
					<th>类型</th>
					<th>收藏量/次</th>
					<th>描述</th>
					<th>操作</th>
				</tr>
				<c:forEach var="list" items="${pb.lists}">
				<tr align="center">
					<td><input type="checkbox" name="flag" value="${list.mid}"/></td>
					<td>${list.mid }</td>
					<td>${list.mname }</td>
					<td>${list.singer}</td>
					<td>${list.longTime }</td>
					<td>${list.musicType.tname }</td>
					<td>${list.collectCount }</td>
					<td>${list.description }</td>					
					<td><button onclick="collect(${list.mid})" type="button">点击收藏</button></td>
				</tr>
				</c:forEach>
			</table>
		</div>
		<!-- 分页 -->
		<div id="page">
			当前页${pb.pageNow}/总页数${pb.pageCount}/总条数${pb.rowCount}　
			<button type="button" onclick="page(1)">首页</button>
			<button type="button" onclick="page(${pb.lastPage})">上一页</button>
			<button type="button" onclick="page(${pb.nextPage})">下一页</button>
			<button type="button" onclick="page(${pb.pageCount})">尾页</button>
			<input class="go" type="text" id="gopage"/><button type="button" onclick="gopage(this.value)">Go</button>
		</div>
	</div>
	<script type="text/javascript">
	function myCollect(){
		location="${pageContext.request.contextPath }/music/music_collectList?collect.user.uid=${userinfo.uid}";
		
	}
	
	function collect(d){		
			$.post(
				"${pageContext.request.contextPath }/music/music_collect",
				"collect.user.uid=${userinfo.uid}&collect.music.mid="+d ,
				function(data){
					if(data == '1') {
						alert("OK");					
					}else {
						alert("No Ok");
					}
				}
			);	
		//location="${pageContext.request.contextPath}/music/music_collect?collect.user.uid=${userinfo.uid}&collect.music.mid="+d;
	}
	
	function qx(){
		$("input[name=flag]").each(function(){
			this.checked = true ;
		})
	}
	
	function fx(){
		$("input[name=flag]").each(function(){
			if(this.checked) {
				this.checked = false ;
			}else {
				this.checked = true ;
			}
		})
	} 
		function sreach(){
			$("#now").val(1);
			document.frm.submit();
		} 
		function page(i){
			$("#now").val(i);
			document.frm.submit();
			//location = '${pageContext.request.contextPath}/animal/animal_list?query.pageNow='+i;
		}
		function gopage(j){
			var j = document.getElementById("gopage").value;
			location = '${pageContext.request.contextPath}/music/music_list?query.pageNow='+j;
		}
		
	$(function(){
		$.post(
				"{pageContext.request.contextPath}/music/music_showType",
				//加载category json数组
				function(data){
					console.log(data);
					var sel = $("#tid");
					var cate = '${query.tid}';
					for(var j in data){
						if(data[j].tid == cate){
							sel.append("<option value='"+data[j].tid+"'selected >=="+data[j].tname+"==</option>");

						}else{
							sel.append("<option value='"+data[j].tid+"'>=="+data[j].tname+"==</option>");
						}
						
					} 
				},
				"json"
			);
	})	
	</script>
</body>
</html>